<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="cssDay02.css">
</head>
<body>
	<h2>文本相关样式</h2>
	<!--预格式化文本 -->
	<pre>
	font-size:20px;         字号
     font-family:"Aharoni";  字体名称
     font-style:italic;      字体倾斜
     font-weight: bold;      文本加粗
     color:blue;              颜色
     text-decoration:underline; 文本修饰，提供下划线，删除线等效果
     letter-spacing:5px;     字间距
     text-align:center;      文本对齐方式
     text-shadow: 3px 3px 5px black; 文本阴影
     text-indent:30px;      首行缩进   
	</pre>
	
	<h2>列表样式 list-style-type</h2>
	<ul id="ultest">
		<li>无序列表1</li>
		<li>无序列表2</li>
		<li>无序列表3</li>
	</ul>
	
	<ol id="oltest">
		<li>有序列表1</li>
		<li>有序列表2</li>
		<li>有序列表3</li>
	</ol>
	<h2>导航条样式1</h2>
	<ul id="nav1">
		<li><a target="_blank" href="https://news.163.com/">新闻</a></li>
		<li><a target="_blank" href="https://war.163.com/">军事</a></li>
		<li><a target="_blank" href="http://news.163.com/photo/#Current">图片</a></li>
		<li><a target="_blank" href="https://news.163.com/air/">航空</a></li>
	</ul>
	
	<h2>导航条样式2</h2>
	<ul id="nav2">
		<li><a target="_blank" href="https://news.163.com/">新闻</a></li>
		<li><a target="_blank" href="https://war.163.com/">军事</a></li>
		<li><a target="_blank" href="http://news.163.com/photo/#Current">图片</a></li>
		<li><a target="_blank" href="https://news.163.com/air/">航空</a></li>
	</ul>
	<h2>表格样式</h2>
		<table>
	  <tr>
	   <!-- th会有加粗，居中的效果 -->
	   <th>学号</th>
	   <th>名字</th>
	   <th>性别</th>
	   <th>专业</th>
	  </tr>
	  <tr>
	   <td>1001</td>
	   <td>张1</td>
	   <td>男</td>
	   <td>计算机</td>
	  </tr>
	  <tr>
	   <td>1002</td>
	   <td>王五</td>
	   <td>女</td>
	   <td>日语</td>
	  </tr>
	 </table>
	 <!-- 练习2 -->
	 <h2>表单样式</h2>
		 	<form action="aa.html">
	   <!-- 文本框 -->
	   <div>
	    <!-- label标签的for属性规定 label 与哪个表单元素绑定 -->
	    <!-- lebel的显式联系：用label标签的for属性关联某个表单项目的id属性 -->
	    <label for="name" class="labelcss">用户名</label>
	    <input type="text" name="name" id="name" value="admin">
	   </div>
	
	   <!-- 密码框 -->
	   <div>
	    <label for="pwd" class="labelcss" >密码</label>
	    <input type="password" name="pwd" id="pwd">
	   </div>
	   
	   <div>
	    <label class="labelcss">性别</label>
	    <!-- lebel的隐式联系 -->
	    <label>
	     男<input type="radio" name="sex" value="male">
	    </label>
	    <label>
	     女<input type="radio" name="sex" value="female" checked="checked">
	    </label>
	   </div>
	   
	   <!-- 复选框 -->
	   <div>
	    <label class="labelcss">爱好</label>
	    <!-- lebel的隐式联系 -->
	    <label>
	     看书<input type="checkbox" name="hobby" value="kanshu">
	    </label>
	    <label>
	     逛街<input type="checkbox" name="hobby" value="guangjie">
	    </label>
	    <label>
	     运动<input type="checkbox" name="hobby" value="yundong">
	    </label>
	   </div>
	   
	   <!-- 下拉列表 -->
	   <div>
	    <label for="jiguan" class="labelcss">籍贯</label>
	    <select name="jiguan" id="jiguan">
	     <option value="liaoning">辽宁</option>
	     <option value="jiling">吉林</option>
	     <option value="heilongjiang">黑龙江</option>
	    </select>
	   </div>
	   
	   <!-- 文本域 -->
	  <div id="tipsdiv">
	    <label for="tips" class="labelcss">备注</label>
	    <textarea rows="4" cols="30" name="tips" id="tips"></textarea>
	   </div>
	   
	   <div id="buttondiv" >
	   	<span>
	    <input type="submit" value="提交"></span>
	    <span>
	    <input type="reset" value="重置"></span>
	   </div>
	 </form>
		
	
	
	


</body>
</html>